<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>商家表</title>

    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <style>
        .box{
            width:600px;
            height:40px;
            margin-left: 200px;
            display: inline;
        }

        .input{
            float:left;
            margin-left: 50px;
            width:200px;/*宽400*/
            height:38px;/*高38（因为文本框内外边框要占用1像素所以总体高度减2，其他盒子同理）*/
            outline:none;
            /*border:none;!*取消文本框内外边框*!*/
            border:2px solid #006EFF;
        }
        .button{
            cursor: pointer;
            float:left;
            width:100px;
            height:40px;
            color:white;
            background-color:#006EFF;/*将按钮背景设置为红色，字体设置为白*/
            border:none;
            outline:none;/*取消边框和外边框将按钮边框去掉*/
        }
        .layui-form{
            margin-top: 150px;
        }
    </style>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>商家表</legend>
    </fieldset>



    <div class="box">
        <form th:action="@{/shop/toShopList}" method="get">
            <input  type="text" class="input" name="shopName" th:value="${shopName}" placeholder="请输入商家名称">
            <input  type="text" class="input" name="shopTel" th:value="${shopTel}" placeholder="请输入手机号">
            <input  type="text" class="input" name="shopAdderss" th:value="${shopAdderss}" placeholder="请输入地址">
            <!--placeholder是文本框中的提示文字-->
            <input type="submit" value="搜索" class="button">
        </form>
    </div>




    <div class="layui-form" >

        <a th:href="@{/shop/toShopAdd}"><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon" ></i></button></a>
        <table class="layui-table">
            <colgroup>
                <col width="100">
                <col width="200">
                <col width="200">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>商家ID</th>
                <th>商家姓名</th>
                <th>商家电话</th>
                <th>商家地址</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="shops:${pager.getList()}">
                <td th:text="${shops.shopId}">1</td>
                <td th:text="${shops.shopName}">商家名称</td>
                <td th:text="${shops.shopTel}">商家电话</td>
                <td th:text="${shops.shopAddress}">商家地址</td>
                <td>

                    <a th:href="@{/shop/goShopxiu(shopId=${shops.shopId})}"><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button></a>
                    <a th:href="@{/shop/delShop(shopId=${shops.shopId})}"><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button></a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <nav style="float: left;">
        <ul class="pagination">
            <li>
                <a th:href="@{/shop/toShopList(shopName=${shopName},shopTel=${shopTel},shopAdderss=${shopAdderss},currentPage=${pager.currentPage -1 &gt; 0 ? pager.currentPage -1 : 1})}">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
            <ul th:with="size=${pager.totalPage}">
                <li th:each="index: ${#numbers.sequence(1,size)}">
                    <a th:href="@{/shop/toShopList(shopName=${shopName},shopTel=${shopTel},shopAdderss=${shopAdderss},currentPage=${index})}" th:text="${index}"></a>
                </li>
            </ul>
            <li>
                <a th:href="@{/shop/toShopList(shopName=${shopName},shopTel=${shopTel},shopAdderss=${shopAdderss},currentPage=${pager.currentPage +1 &gt; pager.totalPage ? pager.totalPage : pager.currentPage+1})}">
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>
        </ul>
    </nav>
    <div style="float: right;margin-top: 25px;">
        <span>共<span th:text="${pager.total}"></span>条记录，分<span th:text="${pager.totalPage}"></span>页显示</span>
    </div>





    <script th:src="@{/layui/layui.js}"></script>
    <script>
        layui.use('carousel', function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        });
    </script>
</body>
</html>